
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.carousel {
				position: relative;
				overflow: hidden;
			}
			
			img {
				width: 100%;
			}
			
			.carousel_img>img {
				position: absolute;
				left: 0;
				width: 100%;
			}
			
			button {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				font-size: 30px;
				position: absolute;
				top: 50%;
				margin-top: -25px;
				background: rgba(0, 0, 0, .8);
				color: #fff;
				cursor: pointer;
			}
			
			button:nth-of-type(1) {
				left: 50px;
			}
			
			button:nth-of-type(2) {
				right: 50px;
			}
			
			ul {
				list-style: none;
				display: inline-flex;
				width: 50px;
				justify-content: space-between;
				position: absolute;
				bottom: 50px;
				left: 50%;
				margin-left: -25px;
			}
			
			li {
				width: 10px;
				height: 10px;
				background: #fff;
				border-radius: 50%;
				cursor: pointer;
			}
			
			li.active {
				background: red;
			}
			
			img.rimg {
				position: absolute;
				left: 100%;
			}
			
			img.limg {
				position: absolute;
				left: -100%;
			}
		</style>
	</head>

	<body>
		<div id="carousel" class="carousel">
			<div class="carousel_img">
				<img class="active" src="img/1.jpg" />
			</div>
			<img src="img/1.jpg" />

			<button><</button>
			<button>></button>
			<ul>
				<li class="active"></li>
				<li></li>
				<li></li>
			</ul>
		</div>

		<script src="../jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//创建一个用来保存图片路径的数组			
			var arr=["img/1.jpg","img/2.jpg","img/3.jpg"];
			//创建下标变量j
			var j=0;
			
			$("#carousel").click(()=>{
				var target=event.target;
				//只有当img的动画执行完成的时候才能执行下一个动画操作
				if(!$("img").is(":animated")){
					if($(target).text()==">"){
					j++;
					j==arr.length&&(j=0);
					//在展示框的右边生成一张图片 注意class要为rimg
					$(".carousel_img").append($(`<img class="rimg" src=${arr[j]}>`));
					//将展示的图片左移100%
					$("img:eq(0)").animate({
						"left":"-100%"
					},1000,()=>{
						$("img:eq(0)").remove();//然后将展示的图片删除
					})
					
					//将右边的图片左移100%
					$("img:eq(1)").animate({
						"left":"0"
					},1000)
					//$("li")[j]加了下标就变成了dom元素 所以需要再加一个$
					$($("li")[j]).addClass("active").siblings().removeClass();
				}else if($(target).text()=="<"){
					j--;
					j==-1&&(j=arr.length-1);
					//在展示框的左边生成一张图片
					$(".carousel_img").append($(`<img class="limg" src=${arr[j]}>`));
					//当前展示的图片向右移动100%
					$("img:eq(0)").animate({
						"left":"100%"
					},1000,()=>{
						$("img:eq(0)").remove();//然后删除
					})
					//将左边准备好的图片向右移动100%
					$("img:eq(1)").animate({
						"left":"0"
					},1000)
					$($("li")[j]).addClass("active").siblings().removeClass();
				}else if(target.nodeName=="LI"){
					//可以通过$(target).index()获取当前点击元素的下标
					console.log($(target).index());
					//可以通过$(".active").index()来获取激活的小圆点的下标
					console.log($(".active").index());
					
					//当点击元素的下标大于激活小圆点的下标，图片从右边出来 否则从左边出来
					if($(target).index()>$(".active").index()){
						//j现在为点击的小圆点的下标
						j=$(target).index();
						//在展示框的右边生成一张图片 注意class要为rimg
						$(".carousel_img").append($(`<img class="rimg" src=${arr[j]}>`));
						//将展示的图片左移100%
						$("img:eq(0)").animate({
							"left":"-100%"
						},1000,()=>{
							$("img:eq(0)").remove();//然后将展示的图片删除
						})
						
						//将右边的图片左移100%
						$("img:eq(1)").animate({
							"left":"0"
						},1000)
						//$("li")[j]加了下标就变成了dom元素 所以需要再加一个$
						$($("li")[j]).addClass("active").siblings().removeClass();
					}else if($(target).index()<$(".active").index()){
						j=$(target).index();
						//在展示框的左边生成一张图片
						$(".carousel_img").append($(`<img class="limg" src=${arr[j]}>`));
						//当前展示的图片向右移动100%
						$("img:eq(0)").animate({
							"left":"100%"
						},1000,()=>{
							$("img:eq(0)").remove();//然后删除
						})
						//将左边准备好的图片向右移动100%
						$("img:eq(1)").animate({
							"left":"0"
						},1000)
						$($("li")[j]).addClass("active").siblings().removeClass();
					}
				}
				}				
			})
			
			
			timer=setInterval(()=>{
				j++;
						j==arr.length&&(j=0);
						//在展示框的右边生成一张图片 注意class要为rimg
						$(".carousel_img").append($(`<img class="rimg" src=${arr[j]}>`));
						//将展示的图片左移100%
						$("img:eq(0)").animate({
							"left":"-100%"
						},1000,()=>{
							$("img:eq(0)").remove();//然后将展示的图片删除
						})
						
						//将右边的图片左移100%
						$("img:eq(1)").animate({
							"left":"0"
						},1000)
						//$("li")[j]加了下标就变成了dom元素 所以需要再加一个$
						$($("li")[j]).addClass("active").siblings().removeClass();
			},3000)
				
			
			$("#carousel").mouseover(()=>{
				clearInterval(timer);
			})
			
			
			$("#carousel").mouseout(()=>{
				timer=setInterval(()=>{
					j++;
							j==arr.length&&(j=0);
							//在展示框的右边生成一张图片 注意class要为rimg
							$(".carousel_img").append($(`<img class="rimg" src=${arr[j]}>`));
							//将展示的图片左移100%
							$("img:eq(0)").animate({
								"left":"-100%"
							},1000,()=>{
								$("img:eq(0)").remove();//然后将展示的图片删除
							})
							
							//将右边的图片左移100%
							$("img:eq(1)").animate({
								"left":"0"
							},1000)
							//$("li")[j]加了下标就变成了dom元素 所以需要再加一个$
							$($("li")[j]).addClass("active").siblings().removeClass();
				},3000)
			})
		</script>
	</body>

</html>